<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能机器人聊天室</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script>
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                console.log('在移动端浏览');
            } else {
                console.log('在pc端浏览');
                window.location.href='index.html'
            }
        }
        browserRedirect();
    </script>
    <link rel="stylesheet" href="css/im.css">
    <link href="css/face.css" rel=stylesheet>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1gugdacttrv5z5mi.css">
    <link rel="stylesheet" href="css/animate.css">
</head>
<body>
    <audio src="img/8400.mp3" id="audio"></audio>
    <div class="ui-chat-box" id="content">
        <header class="ui-section">
            <div class="menu-back" @click="show=false" v-show="show"><span class="iconfont icon-left" ></span></div>
            <span v-text="channel.nickName"></span>
            <div class="menu-btn" @click="show=true"><span class="iconfont icon-caidan01"></span></div>
        </header>
        <section class="ui-section ui-msg-content" ref="list">
            <ul class="ui-msg-list">
                <template v-for="item in msgList">
                    <msg-item :msg="item" ></msg-item>
                </template>
            </ul>
        </section>
        <footer class="ui-section">
            <div class="ui-face-btn"><span class="iconfont icon-biaoqing"></span></div>
            <div class="ui-input-box">
                <input type="text" class="ui-msg-input" v-model="content" @keyup.enter="sendMsg" placeholder="请输入...."/>
            </div>
            <button class="ui-sendBtn" type="button" v-on:click="sendMsg">发送</button>
        </footer>
        <transition name='custom-classes-transition' enter-active-class="animated fadeInRight"
                    leave-active-class="animated fadeOutRight">
            <div class="user-list-box" v-show="show">
                <ul class="user-list">
                    <template v-for="item in onlineList">
                        <user-item :user="item" :channel="channel" :show="show" :time="time" ></user-item>
                    </template>
                </ul>
            </div>
        </transition>
    </div>
    <template id="msgTpl">
        <li class="user-msg" v-if="msg.type==='user'">
            <div class="msg-box">
                <div class="msg-box-img">
                    <img v-bind:src="msg.content.user.pic" class="user-img">
                    <div class="msg-tag-txt">{{msg.content.user.nickName}}</div>
                </div>
                <div class="msg-txt-box">
                    <div class="msg-txt-content"><span class="msg-arrow"></span><div v-html="msg.content.msg"></div></div>
                </div>
            </div>
        </li>
        <li class="me-msg" v-else-if="msg.type==='send'" >
            <div class="msg-box">
                <div class="msg-box-img">
                    <img v-bind:src="msg.content.user.pic" class="user-img">
                    <div class="msg-tag-txt">我</div>
                </div>
                <div class="msg-txt-box">
                    <div class="msg-txt-content"><span class="msg-arrow"></span><div v-html="msg.content.msg"></div></div>
                </div>
            </div>
        </li>
        <li class="sys-msg" v-else="msg.type==='sys'">
            <div class="msg-box"><div v-html="msg.content.msg"></div></div>
        </li>
    </template>
    <template id="userTpl">
        <li class="user-item" :class="user.id==channel.id?'active':''" @click="changeChannel(user)">
            <div class="user-img-box">
                <img class="user-pic" :src="user.pic">
            </div>
            <div class="user-info">
                <div class="info-row">{{user.nickName}}</div>
                <div class="info-row">{{getLastMsg(user)}}</div>
                <span style="display: none">{{time}}</span>
            </div>
        </li>
    </template>
    <script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
    <script src="js/face.js"></script>
    <script src="js/im.js"></script>
</body>
</html>